<template>
        <div class="zh-grade-mage">
            <nav-header>
                <template slot="menuBefore">
                    <li>
                    <router-link to="/user/org/organization">组织架构管理</router-link>
                    </li>
                    <li class="gap">&gt;</li>
                </template>
                    <li v-text="gradeName"></li>
            </nav-header>
            <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-right fr">
                <el-button type="primary" @click="getOrgData">刷新</el-button>

                </div>
            </div>
                <div class="zh-tree-contents "
                    v-loading="loading.status"
                    :element-loading-text="loading.txt"
                >
                <div class="frame-manage">
                        <ul class="frame-list">
                    <li><div class="ellips">序号</div></li>
                    <li><div class="ellips">学校名称</div></li>
                    <li><div class="ellips">操作</div></li>
                </ul>
                    <el-tree :data="orgData" :props="defaultProps" node-key="id" default-expand-all >
                    <div class="custom-tree-node" slot-scope="{ node, data }">
                        <ul class="frame-list">
                        <li><div class="ellips">{{ orgData[0].inx++ }}</div></li>
                        <li>
                                <div class="ellips">
                                <span v-show="node.level >= 2" class="gap"></span>
                                <span v-show="node.level >= 3" class="gap"></span>
                                <span v-show="node.level >= 4" class="gap"></span>
                                <img v-if="node.level === 1" src="/static/image/user/class1.png"> 
                                <img v-else-if="node.level === 2" src="/static/image/user/class2.png"> 
                                <img v-else-if="node.level === 3" src="/static/image/user/class3.png"> 
                                <img v-else-if="node.level === 4" src="/static/image/user/class4.png"> 
                                <span v-html="data.name"></span>
                                </div>
                            </li>
                        <li>
                            <div class="ellips">
                                <!-- 学校管理begin -->
                                <el-button type="text" size="mini" v-if="node.level === 1" @click.stop="addXd" >添加学段</el-button>
                                <!-- 学校管理end -->
                            <!-- 学段管理begin -->
                            <el-button type="text" size="mini" v-if="node.level === 3" @click.stop="toLink(data)">班级管理</el-button>
                                <el-button type="text" size="mini" class="delete-button" v-if="node.level === 2" @click.stop="delXdTergger(data)">删除</el-button>
                            <!-- 学段管理end -->
                            <!-- 班级管理begin -->
                            <el-button type="text" size="mini" v-if="node.level === 4">成员列表</el-button>
                            <el-button type="text" size="mini" class="delete-button" v-if="node.level === 4">删除</el-button>
                            <!-- 班级管理end -->
                                
                            </div>
                        </li>
                        </ul>
                    </div>
                    </el-tree>
                    </div>
                </div>
            </div>
        <!-- 添加学段弹窗begin -->
        <el-dialog
        title="添加学段"
        :visible.sync="addTownFlag"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        :before-close="cancel"
        width="40%"
        >
        <el-form ref="townForm" :model="townForm" label-width="120px" @submit.native.prevent>
            <el-form-item label="选择学段" prop="id" :rules="[{required: true,message: '请选择要添加的学段'}]">
            <el-select v-model="townForm.id" filterable placeholder="请选择添加的学段" >
                <el-option v-for="(area,areaInx) in addAreaList" :key="areaInx" :label="area.name" :value="area.id"></el-option>
            </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addTownTips()">取 消</el-button>
            <el-button type="primary" @click="addTownTips(1)">确 定</el-button>
        </span>
        </el-dialog>
        <!-- 添加学段弹窗end -->
        </div>
</template>
<script>
    export default {
    data() {
        return {
        loading: {
            status: false,
            txt: "获取数据..."
        },
        defaultProps: {
            label: "name"
        },
        gradeName: "",
        orgData: [],
        orgParam: {
            //获取组织架构参数
            data_type: "manage_tree",
            status: [1, 2],
            school_id: this.$route.query.gradeId,
            flag: 1,
            level: "<4",
            is_diffplat: 1
        },
        addTownFlag: false,
        townForm: {
            id: ""
        },
        addAreaList: []
        };
    },
    created() {
        this.getOrgData();
    },
    methods: {
        getOrgData() {
        this.loading.status = true;
        // 重写成功回调
        let success = data => {
            this.loading.status = false;
            this.orgData = data.data;
            this.gradeName = data.data[0].name;
            if (this.orgData.length > 0) {
            this.orgData[0].inx = 1;
            }
            this.$forceUpdate(); //强制渲染
        };

        let fail = data => {
            this.loading.status = false;
            this.$message.error(data.msg);
        };
        this.$ajax.get("api/org/org", {
            params: this.orgParam,
            func: { success: success, fail: fail }
        });
        },
        addXd() {
            this.addTownFlag = true;
            if (this.$refs.townForm) {
                this.$refs.townForm.clearValidate();
            }
            this.getXd();
        },
        getXd() {
            let params = {
                level: 2,
                direction: "balance",
                school_id: this.$route.query.gradeId,
                flag: 2,
                is_diffplat: 1
            };
            const success = res => {
                this.addAreaList = res.data;
            };

            this.$ajax.get("api/org/org", {
                params: params,
                func: { success: success }
            });
        },
        addTown() {
            let flag = true;
            if (!is_empty(this.orgData[0].children)) {
                this.orgData[0].children.forEach(item => {
                    if (item.id === this.townForm.id) {
                        flag = false;
                    }
                })
            }

            if (flag) {
                /*添加学段 */
                let params = {
                    school_id: this.$route.query.gradeId,
                    id: this.townForm.id
                };
                const success = res => {
                    this.$refs.townForm.clearValidate();
                    this.$message.success(res.msg);
                    this.addAreaList = [];
                    this.townForm.id = null;
                    this.addTownFlag = false;
                    this.getOrgData();
                };
                const fail = res => {
                    this.$message.error(res.msg);
                    this.addAreaList = [];
                    this.townForm.id = null;
                    this.addTownFlag = false;
                }

                this.$ajax.post("api/org/add_study_section", params, { func: { success: success, fail: fail } });
            } else {
                this.$message.error('已存在该学段');
            }
        },
        addTownTips(flag) {
            /*控制添加学段的弹窗 */
            if (flag) {
                /*确定的逻辑 */
                this.$refs[`townForm`].validate(valid => {
                    if (valid) {
                        this.addTown();
                    } else {
                        return;
                    }
                });
            } else {
                this.$refs.townForm.clearValidate();
                this.addTownFlag = false;
                this.addAreaList = [];
                this.townForm.id = null;
            }
        },
        cancel() {
            this.$refs.townForm.clearValidate();
            this.addTownFlag = false;
            this.addAreaList = [];
            this.townForm.id = null;
        },
        delXd(id) {
            let params = {
                school_id: this.$route.query.gradeId,
                id: id
            };
            const success = res => {
                this.$message.success(res.msg);
                this.getOrgData();
            };
            const fail = res => {
                this.$message.error(res.msg);
            }

            this.$ajax.delete("api/org/delete_study_section", {
                params: params,
                func: { success: success, fail: fail }
            });
        },
        delXdTergger(obj) {
            let tipsTxt = `确认删除${obj.name}吗？`;
            this.$confirm(tipsTxt, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.delXd(obj.id);
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        toLink(data) {
        let link =
            "/user/org/classmanage?id=" + data.id + "&name=" + this.gradeName + '&gradeId=' + this.$route.query.gradeId + '&pid=' + data.pid;
        this.$router.push(link);
        }
    }
    };
</script>
<style lang="scss">
.zh-grade-mage {
    .frame-manage {
        .el-tree {
        height: auto;
        }
        .frame-list {
        display: flex;
        height: 40px;
        line-height: 40px;
        background: #ddd;
        color: #000;
        text-align: center;
        li {
            flex: 1;
            box-sizing: border-box;
            &:nth-of-type(1) {
            flex: 0 0 50px;
            }
            &:nth-of-type(3) {
            flex: 0 0 200px;
            }
        }
        }
        .custom-tree-node {
        width: 100%;
        .frame-list {
            background: none;
            border-bottom: 1px solid #ddd;
            li {
            position: relative;
            border-left: 1px solid #ddd;
            &:last-child {
                border-right: 1px solid #ddd;
            }
            }
            img {
            display: inline-block;
            vertical-align: middle;
            }
        }
        }
        .el-tree-node__content {
            padding-left: 0 !important; 
            height: auto;
        }
        .el-tree-node__content {
        li:nth-of-type(2) .ellips {
            text-align: left;
            padding-left: 30%;
            .gap {
            display: inline-block;
            width: 18px;
            }
        }
        }
    }
}
</style>


